<template>
  <div class="wrap">
    <div class="form-content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="ID">
          <el-input v-model="formInline.yyid" placeholder="预约ID" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="教室ID">
          <el-input v-model="formInline.yydjsid" placeholder="教室id查找..." style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="预约人ID">
          <el-input v-model="formInline.yyrid" placeholder="预约人id查找..." style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item prop="yyrq" label="日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.yyrq" style="width: 90%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item prop="yykssj" label="开始时间">
          <el-time-picker placeholder="选择时间" v-model="formInline.yykssj" style="width: 90%;" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
        <el-form-item prop="yyjssj" label="结束时间">
          <el-time-picker placeholder="选择时间" v-model="formInline.yyjssj" style="width: 90%;" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formInline.yyrjs" placeholder="角色查找..." style="width: 100px">
            <el-option label="admin" value="admin"></el-option>
            <el-option label="teacher" value="teacher"></el-option>
            <el-option label="student" value="student"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" >
          <el-select v-model="formInline.state" placeholder="状态">
            <el-option label="预约成功" value="1"></el-option>
            <el-option label="结束预约" value="0"></el-option>
            <el-option label="取消预约" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span>
            <el-button type="primary" @click="onSubmit" >查询</el-button>
            <el-button type="primary" v-on:click="mydeleteAllAppintmentById" >批量删除</el-button>
          </span>
        </el-form-item>
      </el-form>

    </div>

    <div class="table">
      <el-table
        :data="appintmentList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          width="100"
          prop="yyid"
          label="id"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="yydjsid"
          label="教室id"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="yyrid"
          label="预约人">
        </el-table-column>
        <el-table-column
          width="200"
          prop="yyrq"
          label="预约日期">
        </el-table-column>
        <el-table-column
          width="200"
          prop="yykssj"
          label="开始时间">
        </el-table-column>
        <el-table-column
          width="150"
          prop="yyjssj"
          label="结束时间">
        </el-table-column>
        <el-table-column
          width="50"
          prop="state"
          label="状态">
        </el-table-column>
        <el-table-column
          align="center" width="180" label="操作">
          <template slot-scope="scope" >
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


<!--    修改按钮弹出来的内容-->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" >
      <el-form style="height: 60%">
        <el-form-item label="预约id">
          <el-input v-model="editAppintment.yyid" placeholder="id查找..."></el-input>
        </el-form-item>
        <el-form-item label="教室id">
          <el-input v-model="editAppintment.yydjsid" placeholder="教室id查找..."></el-input>
        </el-form-item>
        <el-form-item label="预约人id">
          <el-input v-model="editAppintment.yyrid" placeholder="预约人id查找"></el-input>
        </el-form-item>
        <el-form-item prop="yyrq" label="预约日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="editAppintment.yyrq" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item prop="yykssj" label="预约开始时间">
          <el-time-picker placeholder="选择时间" v-model="editAppintment.yykssj" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
        <el-form-item prop="yyjssj" label="预约结束时间">
          <el-time-picker placeholder="选择时间" v-model="editAppintment.yyjssj" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editAppintment.yyrjs" placeholder="角色">
            <el-option label="admin" value="admin"></el-option>
            <el-option label="teacher" value="teacher"></el-option>
            <el-option label="student" value="student"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editAppintment.state" placeholder="状态">
            <el-option label="预约成功" value="1"></el-option>
            <el-option label="结束预约" value="0"></el-option>
            <el-option label="取消预约" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;editAppintmentf()">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getAppintment, editAppintmentById, deleteAllAppintmentById, deleteAppintmentById} from '@/api/admin/appintment'
import qs from 'qs'
import {getClassRoomInfo} from "@/api/admin/classroom";


export default {
  name: "appintment",
  data(){
    return{
      appintmentList:[],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      appintmentAdd:{jsid:'', jsld:'', jsfh:'', jszws:'', sfqy:'', shzws:'', shxx:'', sfkfgxs:'',},
      editAppintment:{},
      formInline: {
        // jsid: '', jsld: '', jsfh: '', jszws: '', sfqy: '', sfkfgxs: '',
      },
      multipleSelection: [],
      selectIds:[],
      pageformInline:{},
    currentPage: 1,
      total:1,
      pageSize:5,pageNum: 1
    }
  },
  created() {
    this.onSubmit();
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize=val;
      getAppintment(qs.stringify(this.pageformInline),this.pageNum,this.pageSize).then(res => {
        if (res.status==200){
          this.appintmentList =  res.data.appintments
          this.total = res.data.total
        }
      }).catch(err =>{
        console.log('查询class失败',err)
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      getAppintment(qs.stringify(this.pageformInline),this.pageNum,this.pageSize).then(res => {
        if (res.status==200){
          this.appintmentList =  res.data.appintments
          this.total = res.data.total
        }
      }).catch(err =>{
        console.log('查询class失败',err)
      })
    },
    mydeleteAllAppintmentById(){
      this.multipleSelection.forEach(appintment => {
        this.selectIds.push(appintment.yyid)
      })
      // qs.stringify(this.selectIds)
      //console.log(this.selectIds.toString())
      deleteAllAppintmentById(this.selectIds.toString()).then(res =>{
        //this.selectIds=[]
        if (res.status==200){
          getAppintment({},this.pageNum,this.pageSize).then(res => {
            if (res.status==200){
              this.appintmentList =  res.data.appintments
            }
          }).catch(err =>{
            console.log('查询appp失败',err)
          }).finally(() =>{
            this.formInline={}
          })
        }else {
        }
      }).catch(err => {
        console.log("批量删除错误")
      })
      //   console.log(this.selectIds)
      //deleteAllStudentById()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    onSubmit() {
      console.log(this.formInline);
      getAppintment(qs.stringify(this.formInline),this.pageNum,this.pageSize).then(res => {
        if (res.status==200){
          this.appintmentList =  res.data.appintments
          this.total = res.data.total
          this.pageformInline=this.formInline
        }
      }).catch(err =>{
        console.log('查询appp失败',err)
      }).finally(() =>{
        this.formInline={}
      })

    },
    editAppintmentf(){
      let userData = {
        yyid:this.editAppintment.yyid,
        yydjsid:this.editAppintment.yydjsid,
        yyrid:this.editAppintment.yyrid,
        yyrq:this.editAppintment.yyrq,
        yykssj:this.editAppintment.yykssj,
        yyjssj:this.editAppintment.yyjssj,
        yyrjs:this.editAppintment.yyrjs,
        state:this.editAppintment.state
      }
      let data = qs.stringify(userData);

      editAppintmentById(data).then( res =>{
        if (res.status==200){
          console.log("ddd")
        }
      }).catch(err => {
        console.log('更新class失败',err)
      })
    },

    handleEdit(index, row) {
      this.editAppintment=this.appintmentList[index]
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {

      deleteAppintmentById(qs.stringify({appintmentid : this.appintmentList[index].yyid})).then(res =>{
        this.appintmentList.splice(index,1)
      }).catch(function (error) {
        //console.log(error);
      });

    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    width: 1400px;
    height: 100%;
    margin-left: 10px;
    margin-top: 10px;
    /*background-color: #3a835d;*/
  }

  .form-content{
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
    margin: 10px auto;
    display: flex;
    justify-content: center;
  }
  .el-table{
    width: 100%;
  }
  .el-dialog{
    width: 50%;
    height: 70%;
  }


</style>
